<template>
  <div>
    <div style="text-align:right">
      <el-button-group>
        <el-button :type="dataType=='today'?'success':''" @click="dataType='today'">今日</el-button>
        <el-button :type="dataType=='yesterday'?'success':''" @click="dataType='yesterday'">昨日</el-button>
      </el-button-group>
    </div>
    <div style="padding-top:10px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card">
            <div class="filed-item">
              <div class="item-label primary">Cube数量</div>
              <div class="item-value primary">
                <count-to :startVal="0" :endVal="data.totalCube||0" :duration="duration" suffix=" 个"></count-to>
              </div>
            </div>
            <div class="filed-item">
              <div class="item-label"></div>
              <div class="item-value">
                +<count-to :startVal="0" :endVal="data[dataType+'IncrCube']||0" :duration="duration" suffix=" 个"></count-to>
              </div>
            </div>
            <div class="filed-item">
              <div class="item-label">Roc</div>
              <div class="item-value">
                <count-to :startVal="0" :endVal="data.rocCube||0" :duration="duration" suffix=" 个"></count-to>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div class="filed-item">
              <div class="item-label primary">Cube大小</div>
              <div class="item-value primary">
                <count-to :startVal="0" :endVal="formatSizeVal(data.totalCubeSize)||0" :duration="duration" :decimals="2" :suffix="' '+getSizeUnit(data.totalCubeSize)"></count-to>
              </div>
            </div>
            <div class="filed-item">
              <div class="item-label"></div>
              <div class="item-value">
                +<count-to :startVal="0" :endVal="formatSizeVal(data[dataType+'IncrCubeSize'])||0" :duration="duration" :decimals="2" :suffix="' '+getSizeUnit(data[dataType+'IncrCubeSize'])"></count-to>
              </div>
            </div>
            <div class="filed-item">
              <div class="item-label"></div>
              <div class="item-value">&nbsp;</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div class="filed-item">
              <div class="item-label primary">任务执行次数</div>
              <div class="item-value primary">
                <count-to :startVal="0" :endVal="data.totalRunnedCount||0" :duration="duration" suffix=" 次"></count-to>
              </div>
            </div>
            <div class="filed-item">
              <div class="item-label"></div>
              <div class="item-value">
                +<count-to :startVal="0" :endVal="data[dataType+'IncrRunnedCount']||0" :duration="duration" suffix=" 次"></count-to>
              </div>
            </div>
            <div class="filed-item">
              <div class="item-label">失败</div>
              <div class="item-value">
                <count-to :startVal="0" :endVal="data.failedRunnedCount||0" :duration="duration" suffix=" 次"></count-to>
              </div>
            </div>
            <div class="filed-item">
              <div class="item-label"></div>
              <div class="item-value">&nbsp;</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div class="filed-item">
              <div class="item-label primary">查询次数</div>
              <div class="item-value primary">
                <count-to :startVal="0" :endVal="data.totalQueryCount||0" :duration="duration" suffix=" 次"></count-to>
              </div>
            </div>
            <div class="filed-item">
              <div class="item-label"></div>
              <div class="item-value">
                +<count-to :startVal="0" :endVal="data[dataType+'IncrQueryCount']||0" :duration="duration" suffix=" 次"></count-to>
              </div>
            </div>
            <div class="filed-item">
              <div class="item-label primary">慢查询</div>
              <div class="item-value primary">
                <count-to :startVal="0" :endVal="data.slowQueryCount||0" :duration="duration" suffix=" 次"></count-to>
              </div>
            </div>
            <div class="filed-item">
              <div class="item-label"></div>
              <div class="item-value">
                +<count-to :startVal="0" :endVal="data[dataType+'IncrSlowQueryCount']||0" :duration="duration" suffix=" 次"></count-to>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },
  props: {
    data: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      duration: 1000,
      dataType: 'today',
      statistics: {}
    }
  },
  methods: {
    formatSizeVal(val) {
      if (val > 1024 * 1024 * 1024) {
        return val / (1024 * 1024 * 1024)
      } else if (val > 1024 * 1024) {
        return val / (1024 * 1024)
      } else if (val > 1024) {
        return val / (1024)
      } else {
        return val
      }
    },
    getSizeUnit(val) {
      if (val > 1024 * 1024 * 1024) {
        return 'G'
      } else if (val > 1024 * 1024) {
        return 'M'
      } else if (val > 1024) {
        return 'K'
      } else {
        return 'B'
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-col-12{
    padding: 0px!important;
  }
  .filed-item{
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    .item-label{
      color: #333;
    }
    .item-value{
      color: #333;
    }
    .primary{
      font-size:18px;
      font-weight: bold;
    }
  }
</style>
